<template>
  <div class="successAccount">
    <header>
      <p>{{findResult}}</p>
    </header>
    <main>
      <ul>
        <li
          v-for="(item,index) in accountList"
          :key="index">
          <p><i>姓名：</i><span v-text="item.realName?item.realName:'-'"></span></p>
          <p><i>学校：</i><span v-text="item.schoolName?item.schoolName:'-'"></span></p>
          <p><i>你的账号：</i><span v-text="item.account?item.account:'-'"></span></p>
          <p><i>你的手机号：</i><span v-text="item.mobile?item.mobile:'-'"></span></p>
          <p><i>绑定的QQ：</i><span v-text="item.qqNickName?item.qqNickName:'-'"></span></p>
          <p><i>绑定的微信：</i><span v-text="item.wxNickName?item.wxNickName:'-'"></span></p>
        </li>
      </ul>
    </main>
    <footer>
      <span class="title">温馨提示：</span>
      <p>1.可以使用找回的账号或手机号登录使用。也可以通过绑定的QQ或微信登录使用。</p>
      <p>2.如果忘记密码，可以找回密码。<button @click="findPwd">立即找回</button></p>
    </footer>
  </div>
</template>

<script>
    export default {
        name: "successAccount",
        props: {
            accountList: Array,
            findResult: String
        },
        data() {
            return {

            }
        },
        methods: {
            findPwd() {
                this.$router.push('/forget/password')
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../../styles/common.scss';
  .successAccount{
    header{
      height: 90px;
      background-image: url(../../../../assets/img/findAccount.png);
      background-position: top 20px center;
      background-repeat: no-repeat;
      background-size: 120px;
      position: relative;
      padding: 20px 0;
      box-shadow: 0 0 3px 1px #f1f1f1;
      p{
        color: #67d855;
        font-size: 1.1rem;
        text-align: center;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
    main{
      ul{
        li{
          width: 60%;
          margin: 10px auto 20px;
          padding: 30px 10px 10px;
          box-shadow: 0 0 3px 1px #f1f1f1;
          p{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f5f5f5;
            padding: 12px 0;
            i{
              font-style: normal;
              font-size: 1rem;
              color: #666;
            }
            span{
              font-size: 1rem;
              color: #000;
            }
          }
        }
      }
    }
    footer{
      padding: 10px;
      span.title{
        display: inline-block;
        font-weight: bold;
        font-size: 1.1rem;
        margin-bottom: 6px;
      }
      p{
        padding: 2px 10px;
        font-size: 0.7rem;
        button{
          font-size: 0.7rem;
          border: 1px solid #aaa;
          background-color: #fff;
          border-radius: 5px;
          cursor: pointer;
        }
        button:hover{
          background-color: #f2f2f2;
        }
      }
    }
  }
</style>